<template>
  <Layout>
      <div ref="mainContainer" class="main-container" v-loading="isLoading">
          <BlogDetail :blog="data" v-if="data"></BlogDetail>
          <BlogComment v-if="!isLoading"></BlogComment>
      </div>
      <template #right>
          <div class="right-container" v-loading="isLoading">
              <BlogTOC :toc="data.toc" v-if="data"></BlogTOC>
          </div>
      </template>
  </Layout>
</template>

<script>
import Layout from "@/components/Layout"
import BlogDetail from "./components/BlogDetail"
import BlogTOC from './components/BlogTOC'
import {getBlog} from '@/api/blog'
import fetchData from '@/mixins/fetchData'
import BlogComment from "./components/BlogComment"
import mainScroll from "@/mixins/mainScroll"
import {siteTitle} from "@/utils";
export default {
    mixins: [fetchData(null), mainScroll("mainContainer")],
    components: {
        Layout,
        BlogDetail,
        BlogTOC,
        BlogComment
    },
    methods: {
        async fetchData(){
            let resp = await getBlog(this.$route.params.id)
            // resp = null;
            if(!resp){
                this.$router.push('/404');
                return;
            }
            siteTitle.setRouterTitle(resp.title);
            return resp;
        },
    }
}
</script>

<style scoped lang="less">
.main-container{
    width: 100%;
    height: 100%;
    padding: 20px;
    position:relative;
    box-sizing: border-box;
    overflow-y: scroll;
    scroll-behavior: smooth;
}
.right-container{
    width: 300px;
    height: 100%;
    box-sizing: border-box;
    padding: 20px;
    position: relative;
    overflow-y: scroll;
    scroll-behavior: smooth;
}
</style>